<template>
	<view class="feedback">
		<view class="feedback_content">
			<textarea name="" id="" v-model="content" placeholder="请输入您要反馈的问题，以便我们为您解决"
				placeholder-class="placeholder_style"></textarea>
			<view class="img_list">
				<view class="img" v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode="" @click="previewImg(index)"></image>
					<view class="del_btn" @click="delImg(index)">
						<uni-icons type="clear" size="26"></uni-icons>
					</view>
				</view>
				<view class="upload_btn" @click="upload" v-if="imgList.length<3">
					<image src="/static/mine/shangchuan2.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="contact">
			<view class="title">联系方式</view>
			<view class="contact_input">
				<input type="number" v-model="phone" placeholder="请输入手机号便于联系（非必填）" placeholder-class="placeholder_style">
			</view>
		</view>
		<view class="btn" @click="submitFeedback">提交</view>
	</view>
</template>

<script>
	import baseUrl from "../../../libs/config.js"
	export default {
		data() {
			return {
				content: '',
				phone: '',
				imgList: [],
				BASE_URL: baseUrl.baseUrl,
			};
		},
		methods: {
			upload() {
				var that = this;
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'],
					success: (res) => {
						res.tempFilePaths.forEach(item => {
							this.upImg(item)
							// this.imgList.push(item)
						});
						// this.imgList.forEach(item => {
						// 	this.upImg(item)
						// })
					}
				});
			},
			upImg(path) {
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: `${this.BASE_URL}api/front/upload/image?pid=7&model=user`,
					filePath: path,
					name: 'multipart',
					header: {
						'Authori-zation': uni.getStorageSync('token'),
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						// console.log(res, "res----")
						uni.hideLoading()
						const resData = JSON.parse(res.data)
						if (resData.code == 200) {
							this.imgList.push(resData.data.url)
						} else {
							this.showToast(resData.message)
						}

					}
				});
			},
			delImg(i) {
				this.$delete(this.imgList, i)
			},
			previewImg(index) {
				uni.previewImage({
					current: index,
					urls: this.imgList
				})
			},
			async submitFeedback() {
				if (this.content == '') {
					return this.showToast('请输入反馈内容~')
				}
				var data = {
					content: this.content,
					phone: this.phone,
					images:this.imgList.join(',')
				}
				const res = await this.$api.post('user/feedback', data);
				if (res.code == 200) {
					this.showToast('反馈成功');
					setTimeout(v => {
						uni.navigateBack();
					}, 2500)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.feedback {
		padding: 20rpx 26rpx;
		box-sizing: border-box;

		.feedback_content {
			padding: 28rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 50rpx;

			textarea {
				width: 100%;
				height: 210rpx;
			}

			.img_list {
				display: flex;
				align-items: center;

				>view {
					width: 134rpx;
					height: 134rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.img {
					margin-right: 20rpx;
					position: relative;

					.del_btn {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						z-index: 6;
					}
				}
			}
		}

		.contact {
			margin-bottom: 132rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 22rpx;
			}

			.contact_input {
				width: 100%;
				height: 94rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 14rpx;
				background-color: #fff;

				input {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn {
			width: 100%;
			height: 94rpx;
			background-color: #2E80FE;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 14rpx;
			text-align: center;
			line-height: 94rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
		}

		.placeholder_style {
			font-size: 26rpx;
			color: #999;
		}
	}
</style>